<template>
  <div class="home">
    <!-- <hear></hear> -->
    <BDhear :num="7"></BDhear>

    <el-container>
      <el-main class="zong">
        <el-card class="tiops box-card">
          <div slot="header" class="clearfix">
            <div>待支付订单</div>
            <!-- <div>
              <span>应付：</span>
              <span class="money">￥{{zhi}}</span>
            </div> -->
          </div>
          <el-table :data="tableData">
            <el-table-column prop="date" label="订单号" width="280">
            </el-table-column>
            <el-table-column prop="name" label="保函类型" width="180">
            </el-table-column>
            <el-table-column prop="address" label="产品"> </el-table-column>
            <!-- <el-table-column prop="金额" label="支付金额"> </el-table-column> -->
          </el-table>
        </el-card>
        <el-card class="box-card" style="margin-top: 15px">
          <div slot="header" class="clearfix">
            <div v-if="!type">支付方式</div>
            <div
              style="
                font-size: 20px;
                font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                font-weight: 800;
                color: #1795ff;
              "
              v-else
            >
              {{ type }}
            </div>
            <div>
              <span>应付：</span>
              <span class="money">￥{{ zhi }}</span>
            </div>
          </div>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <div v-if="url" style="display: flex">
              <!-- {{url}} -->
              <div>
                <img
                  v-if="btnDisabled"
                  style="height: 200px"
                  :src="url"
                  alt=""
                  srcset=""
                />
                <img
                  v-else
                  @click="cionurl"
                  style="height: 200px"
                  src="@/assets/BidSecurity/guoqi.png"
                  alt=""
                  srcset=""
                />
              </div>
              <div style="display: flex; align-items: end">
                <div>{{ btnText }}</div>
              </div>
            </div>
            <el-tab-pane v-if="!url" label="支付宝" name="first">
              <img
                v-if="url"
                style="height: 200px"
                :src="url"
                alt=""
                srcset=""
              />
              <img
                v-else
                class="cions-img"
                src="@/assets/login/zhifubao.png"
                alt=""
                srcset=""
              />

              <!-- <el-radio-group v-model="radio">
                <el-radio :label="1">支付宝</el-radio>
                <el-radio :label="2">蚂蚁花呗</el-radio>
              </el-radio-group> -->
            </el-tab-pane>
            <el-tab-pane v-if="!url" label="微信" name="second">
              <div>
                <img
                  v-if="url"
                  style="height: 200px"
                  :src="url"
                  alt=""
                  srcset=""
                />
                <img
                  v-else
                  class="cions-img"
                  src="@/assets/login/weixin.jpg"
                  alt=""
                  srcset=""
                />
              </div>
              <!-- <el-radio-group v-model="radio">
                <el-radio :label="1">支付宝</el-radio>
                <el-radio :label="2">蚂蚁花呗</el-radio>
              </el-radio-group> -->
            </el-tab-pane>
            <el-tab-pane v-if="!url" label="网银支付" name="third">
              <img
                class="cions-img"
                src="@/assets/login/yinlian.png"
                alt=""
                srcset=""
              />
              <!-- <el-radio-group v-model="radio">
                <el-radio :label="1">支付宝</el-radio>
                <el-radio :label="2">蚂蚁花呗</el-radio>
              </el-radio-group> -->
            </el-tab-pane>
            <!-- <el-tab-pane label="线下汇款" name="fourth">
     
            </el-tab-pane> -->
          </el-tabs>
        </el-card>
      </el-main>
    </el-container>
    <div class="bottom">
      <span style="font-size: 14px">实付金额：</span>
      <span class="money asdas">￥{{ zhi }}</span>
      <el-button @click="zhibutt" type="warning">{{ zhifuanniu }}</el-button>
    </div>
    <!-- <el-dialog
      :title="cion"
      :visible.sync="dialogVisible"
      width="30%"
      @close="handleClosePay"
    >
      <div class="content">
        <h3></h3>
        <img
          class="pic"
          :style="{ opacity: btnDisabled ? 1 : 0.3 }"
          :src="url"
        />
        <el-button class="casdas" @click="chengong">确定支付</el-button>
      </div>
    </el-dialog> -->
    <!-- <el-dialog
      class="dialog-pay"
      title=""
      :visible.sync="dialogVisible"
      :show-close="false"
      @close="handleClosePay"
    >
      <div class="content">
        <p class="tip">{{  }}</p>
        <p class="tip">
          支付金额：<span class="small">￥</span
          ><span class="large">{{ zhi }}</span>
        </p>
        <img
          class="pic"
          :style="{ opacity: btnDisabled ? 1 : 0.3 }"
          :src="url"
        />
        <el-button
          class="btn"
          :class="btnDisabled ? 'disabled' : ''"
          type="primary"
         
          @click="handleRefreshCode"
          >{{ btnText }}</el-button
        >
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import axios from "axios";
import BDhear from "./BDhear.vue";
// import hear from ".././../components/hear.vue";
import { paysend, paylist, getamount, notifyurl, pcpay } from "@/api/xin.js";
import { getpayinfo, bhpay } from "@/api/houer";
export default {
  components: {
    BDhear,
    // hear
  },
  name: "WechatPay",
  props: {
    pay: Object,
  },
  data() {
    return {
      zhifuanniu: "点击支付",
      activeName: "first",
      radio: "1",
      url: "",
      zhi: "",
      type: "",
      // zhi: 1,
      cion: "",
      merOrderId: "",
      tableData: [
        {
          date: sessionStorage.getItem("apply_number"),
          name: "",
          address: "",
          jine: "",
        },
      ],
      sparams: {
        page: 0,
        page_limit: 10,
        state: 2,
        merOrderId: "",
        // user_id: sessionStorage.getItem("id"),
      },
      dialogVisible: false,
      btnDisabled: true,
      btnText: "",
      second: 60,
      timer: null,
      refresh: true,
      tijiao: 0,
      tijiaos: 0,
      dialogVisible: false,
      btnDisabled: true,
      btnText: "",
      second: 60,
      timer: null,
      refresh: true,
    };
  },
  watch: {
    "pay.show": {
      handler(val) {
        if (val) {
          this.dialogVisible = this.pay.show;
          setTimeout(this.handleReportPayNotify(), 5000);
        }
      },
      immediate: true,
    },
  },
  created() {
    // getamount({
    //   applyNumber: sessionStorage.getItem("apply_number"),
    // })
    getamount(sessionStorage.getItem("apply_number"))
      .then((res) => {
        // this.$notify.error({
        //   message: res.data.msg,
        // });
        console.log("tijiao", res.data);
        this.zhi = res.data.data.amount;
        // this.zhi=res.data.data
        this.tableData[0].name = res.data.data.gtype;
        this.tableData[0].address = res.data.data.cp_name;
      })
      .catch((err) => {
        console.log("失败", err);
      });
  },
  mounted() {},
  methods: {
    handleClick(tab, event) {
      this.tijiao = tab.index;
      console.log(tab.index);
    },
    // 刷新二维码
    handleRefreshCode() {
      this.zhifu();
      //   this.$bus.$emit('refreshCode')
      this.handleCountDown();
      // this.handleReportPayNotify();
      this.refresh = false;
      this.btnDisabled = false;
    },
    zhifu() {
      console.log("调用支付");
      var bicin = {
        // pay_type: 1,
        // user_id:sessionStorage.getItem("user_id"),
        // amount: 1 + "",
        applyNumber: sessionStorage.getItem("apply_number"),
      };
      paysend(bicin).then((res) => {
        console.log("tijiao", res, res.data.code == 1);
        if (res.data.code == 200) {
          // this.dialogVisible = true;
          this.zhifuanniu = "确定支付";
          this.handleCountDown();
          this.url ='data:image/jpeg;base64,'+ res.data.data.baseCode;
          // this.url = "http://192.168.0.28:8082/" + res.data.data.url;
          this.sparams.merOrderId = res.data.data.merOrderId;
          console.log(this.sparams.merOrderId);
        } else {
          console.log("zhifu失败", res);
          // this.$notify.error({
          //   message: res.response.data.msg,
          // });
        }
      });
    },
    chengong() {
      // this.sparams.merOrderId="336J20221109111604139971"
      paylist(this.sparams).then((res) => {
        console.log("发票列表", res);
        if (res.data.code == 1) {
          if (res.data.data.rows[0].state == 2) {
            this.$router.push("/BidSecurity/puBlic");
            //  this.$router.push("/Public");
          } else {
            (this.type = ""), (this.zhifuanniu = "点击支付");
            this.$message({
              showClose: true,
              message: "支付未成功或没有支付，请重新进行支付",
              type: "warning",
            });
          }
        } else {
          console.log("失败", err.response.data);
          this.$notify.error({
            message: err.response.data.msg,
          });
        }
      });
      // this.$router.push("/public");
      return;
      notifyurl({
        amount: this.zhi * 100 + "",
        guarantee_id: sessionStorage.getItem("guarantee_apply_id"),
      }).then((res) => {
        console.log("tijiao", res);
        if (res.data.code == 1) {
        } else {
          console.log("失败", err.response.data);
          this.$notify.error({
            message: err.response.data.msg,
          });
        }
      });
    },
    bhpays() {
      var bbc = {};
      (bbc.apply_number = sessionStorage.getItem("apply_number")),
        (bbc.user_id = 3),
        (bbc.image = "1231312");
      bbc.bankname = "1231312";
      bbc.bankcode = "1231312";
      bbc.bankaccount = "1231312";
      bbc.rebankname = "1231312";
      bbc.rebankcode = "1231312";
      bbc.rebankaccount = "1231312";
      // sessionStorage.setItem("zhi",this.ruleForm.rebankaccount)
      // this.$router.push("/Bidpayments");

      //    return

      bhpay(bbc).then((err) => {
        console.log("已经提交", err.data.data);
        // this.ruleForm=err.data.data.info
        if (err.data.code == 1) {
          this.$message({
            message: "提交成功请等待审核",
            type: "success",
          });
          this.$router.push("/Public");
        } else {
          this.$message({
            message: err.data.mag,
            type: "success",
          });
          // this.$message.error(err.data.mag);
        }
      });
    },
    zhibutt() {
      //   // 测试
      //        this.$router.push("/BidSecurity/puBlic");
      // return
      console.log(123, this.tijiao);
      if (this.zhifuanniu == "确定支付") {
        this.chengong();
        return;
      }
      // this.bhpays()
      // return
      if (this.tijiao == 0) {
        this.tijiaos = "zb";
        this.type = "支付宝";
        this.zhifu();
        // &&this.tijiao == "wx"
      }
      if (this.tijiao == 1) {
        this.tijiaos = "wx";
        this.type = "微信";
        this.zhifu();
      }
      if (this.tijiao == 2) {
        this.zhifus();
      } else {
        // this.zhifu();
      }
    },
    zhifus() {
      pcpay({
        amount: this.zhi * 100 + "",
        guarantee_id: sessionStorage.getItem("guarantee_apply_id"),
      }).then((res) => {
        //    this.$notify.error({
        //   message: res.data.msg
        // });

        console.log("tijiao", res, res.data.code == 1);
        if (res.data.code == 1) {
          console.log("zgif", res.data.data.data);
          window.location.href = res.data.data.data;
          // this.dialogVisible=true
          // this.url="http://192.168.0.28:8082/"+res.data.data.url
        } else {
          console.log("失败", res);
        }
      });
    },
    // 二维码倒计时
    handleCountDown() {
      if (this.second == 1) {
        if (this.refresh) {
          this.second = 60;
          this.btnDisabled = false;
          this.btnText = "点击二维码刷新重新获取二维码";
          if (this.timer) {
            clearInterval(this.timer);
          }
        } else {
          this.$emit("closePay", { type: "fail" });
          clearInterval(this.timer);
          this.$message.warning("等待时间过长，请重新发起支付");
        }
      } else {
        this.second--;
        this.btnDisabled = true;
        this.btnText = `距离二维码过期剩余${this.second}秒`;
        this.downTimer = setTimeout(() => {
          this.handleCountDown();
        }, 1000);
      }
    },
    // handleClosePay() {
    //         this.$message.warning("您已取消支付");
    // },
    // 监听支付弹窗关闭
    handleClosePay() {
      if (this.timer) {
        clearInterval(this.timer);
      }
      if (this.downTimer) {
        clearTimeout(this.downTimer);
      }
      this.$emit("closePay", { type: "fail" });
      this.$message.warning("您已取消支付");
    },
    // 监测支付回调结果
    handleReportPayNotify() {
      let num = 0;
      this.timer = setInterval(() => {
        num++;
        this.pay.fn().then((res) => {
          if (res.status == 111111) {
            this.$emit("closePay", { type: "success" });
            clearInterval(this.timer);
          }
        });
        if (num == 12) {
          this.$emit("closePay", { type: "fail" });
          clearInterval(this.timer);
          this.$message.warning("等待时间过长，请重新发起支付");
        }
      }, 5000);
    },
    beforeDestroy() {
      if (this.timer) {
        clearInterval(this.timer);
      }
      if (this.downTimer) {
        clearTimeout(this.downTimer);
      }
    },
    cionurl() {
      console.log(this.btnDisabled);
      if (this.btnDisabled == false) {
        (this.btnDisabled = true), this.handleRefreshCode();
        // this.zhifu()
        // this.handleCountDown()
      }
    },
  },
};
</script>
<style>
.zong .el-card__body {
  padding-top: 0px !important;
}
</style>
<style scoped>
.home {
  height: 100vh;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  background: #f0eff4;
  /* padding-bottom: 20px; */
}

.el-container {
  /* height: 100%; */
  display: flex;
  flex-direction: column;
  /* align-items: flex-end; */
}
.cions-img {
  width: 200px;
}
.casdas {
  width: 80%;
  margin-top: 20px;
  margin-bottom: 20px;
}
.tiops {
  /* margin-top: 20px; */
}
.el-card__body,
.el-main {
  padding: 20px;
  padding-top: 0 !important;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pic {
  width: 80%;
}
.el-main {
  flex: 1;
  box-sizing: border-box;
  padding: 20px;
  background-color: #f1f0f5;
}
.asdas {
  margin-right: 10px;
}
.el-footer {
  height: 100px !important;
  width: 100%;
  /* background-color: #333; */
}

.clearfix {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-radio {
  width: 200px;
  height: 80px;
  line-height: 80px;
}
::v-deep.el-radio .el-radio__label {
  font-size: 18px !important;
}
.bottom {
  /* height: 100%; */
  position: absolute;
  bottom: 10px;
  width: 100%;
  padding: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: #ffff;
}
.money {
  color: #e8862a;
  font-size: 20px;
}
.el-button--small {
  width: 80px;
  margin-left: 16px;
}
</style>
